<template>
  <el-dialog v-dialogDrag v-if="popenevTVisible" :title="modalTitle" :visible.sync="popenevTVisible" width="320px" :before-close="handleCancel" :close-on-click-modal="false">
    <!-- 搜索框 -->
    <el-input placeholder="搜索" v-model="searchkey">
      <i slot="prefix" class="el-input__icon el-icon-search hc"></i>
    </el-input>
    <el-scrollbar class="scorll-Y">
      <el-tree class="filter-tree mt-10" :data="gwmbList" :props="defaultProps" node-key="tempId" :highlight-current="true" :check-on-click-node="true" :show-checkbox="true" :filter-node-method="filterNode" @check-change="onSelect" ref="gwmbTree">
        <span class="custom-tree-node" slot-scope="{ node, }">
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleOk">确定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
import PinYinMatch from "pinyin-match";
export default {
  data()
  {
    return {
      searchkey: null,
      popenevTVisible: true,
      //正文数据
      wordData: {},
      //公文模板列表
      gwmbList: [],
      //是否多选
      multiple: false,
      defaultProps: {
        label: "tempName"
      },
      //promise 状态
      promiseStatus: null,
      modalTitle: "请选择公文模板",
      userNumberObj: {},
      cacleKey: "HCIT_GWMB_USE_NUM"
    };
  },
  watch: {
    searchkey(val)
    {
      this.$refs.gwmbTree.filter(val);
    },
  },
  computed:
  {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    getGwmbList()
    {
      console.log(this.wordData);
      //执行请求
      request({
        url: "/gwmb/open/list",
        method: "get",
        params: {
          personunid: this.userInfo.unid,
          modules: this.wordData.moduleName
        }
      }).then((res) =>
      {
        let gwmbList = res || [];
        gwmbList.forEach(pre_gwmb =>
        {
          let pre_unid = pre_gwmb.tempId;
          let pre_useNum = this.userNumberObj[pre_unid];
          if (pre_useNum == null)
          {
            pre_useNum = 0;
          }
          pre_gwmb.useNum = pre_useNum;
        })
        //获取缓存的使用次数 根据次数排序
        gwmbList.sort((a, b) => b.useNum - a.useNum);
        this.gwmbList = gwmbList;
      });
    },
    filterNode(value, data)
    {
      if (!value) return true;
      return PinYinMatch.match(data["tempName"], value);
    },
    show(wordData, config)
    {
      let userNumStr = localStorage.getItem(this.cacleKey);
      if (userNumStr != null)
      {
        this.userNumberObj = JSON.parse(userNumStr);
      }
      this.wordData = wordData || {};

      this.getGwmbList();
      // 创建promise
      return new Promise((resolve, reject) =>
      {
        this.promiseStatus = {
          resolve,
          reject,
        };
      });
    },
    handleOk()
    {
      let selects = this.$refs.gwmbTree.getCheckedNodes();
      if (selects.length > 0)
      {
        let gwmb = selects[0];
        let userNum = this.userNumberObj[gwmb.tempId];
        if (userNum == null)
        {
          userNum = 0;
        }
        userNum++;
        this.userNumberObj[gwmb.tempId] = userNum;
        localStorage.setItem(this.cacleKey, JSON.stringify(this.userNumberObj));
        //单选
        this.promiseStatus.resolve({
          choiceData: selects
        });
        //发送制版请求
        this.destroyElement();
      }
      else
      {
        this.$message.warning("请选择公文模板")
      }
    },
    onSelect(data, check, tree)
    {
      if (check && !this.multiple)
      {
        this.$refs.gwmbTree.setCheckedKeys([data["tempId"]]);
      }
    },
    handleCancel()
    {
      //清空勾选项
      this.promiseStatus.reject({
        msg: "取消",
      });
      this.selectedKeys = [];
      this.destroyElement();
    },
    /**
     * 监听搜索框改变
     */
    searchChange(e)
    {
      console.log(this.searchkey);
    },
    /**
     * cs 2022-4-8
     * 销毁组件
     */
    destroyElement()
    {
      this.popenevTVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.scorll-Y {
  height: 400px;
  margin-top: 10px;

  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
  }
  ::v-deep .el-scrollbar__view {
    height: 100%;
  }
  ::v-deep .el-tree {
    height: 97%;
  }
}
.custom-tree-node {
  width: fit-content;
}
::v-deep .el-tree-node {
  width: fit-content;
}
</style>
